<!DOCTYPE html>

<html lang="zh-cn">
    <body>
        <title>文字相关</title>
        <link rel="stylesheet" type='text/css' href="text.css">
    </body>

    <h1>文字方向(text directions)</h1>
    <div id="direction">
        <div id="default">
            <p>默认情况: English</p>
        </div>

        <div class="container">
            <p class="vertical-rl">writting-mode: vertical-rl 中文巴巴爸爸吧吧吧吧吧吧不不不不吧吧吧吧吧奥不</p>
        </div>

        <div class="container">
            <p class="vertical-lr">writting-mode: vertical-lr 中文 bajkfjdkjfdkj吧啦吧啦拉巴拉巴拉巴拉巴拉</p>
        </div>

        <div class="container">
            <p class="horizontal-tb">writting-mode: horizontal-tb 中文 巴巴爸爸爸爸爸爸爸爸爸爸爸爸爸爸</p>
        </div>
    </div>

    <h1>Overflowing content相关</h1>
    <div id="overflowing">
        <div class="container">
            <p>默认情况下的overflow, 需要有很多很多很多很多内容， 要超出范围, 厉害了我的世界, 默认情况下的overflow, 需要有很多很多很多很多内容， 要超出范围, 厉害了我的世界, 
                默认情况下的overflow, 默认情况下的overflow, 默认情况下的overflow, 默认情况下的overflow
            </p>
        </div>

        <div>
            <p id="overflowhidden">overflow: hidden, 显示效果。 overflow: hidden, 显示效果</p>
        </div>

        <div>
            <p id="overflowscroll">overflow: scroll, 滑动效果, overflow: scroll滑动效果</p>
        </div>
    </div>
</html>